<template>
    <div class="app-container">
        <el-form inline>
            <el-form-item label="会员ID">
                <el-input v-model="filterParams.memberId" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="支付平台">
                <el-select style="width: 300px;" v-model="filterParams.platformCode">
                    <el-option label="中金" value="ZHONG_JIN"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getAccountListData">查询</el-button>
                <el-button pinia @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="table">
            <el-table :data="accountList">
                <el-table-column label="账户" prop="memberId"></el-table-column>
                <el-table-column label="名称" prop="memberName"></el-table-column>
                <el-table-column label="支付平台" prop="platformName"></el-table-column>
                <el-table-column label="剩余余额" prop="usableMoney"></el-table-column>
                <el-table-column label="操作" prop="oparate">
                    <template #default="{ row }">
                        <el-button @click="toPayments(row)" type="primary" link>收支明细</el-button>
                    </template>
                </el-table-column>
                <template #empty>
                    <el-empty></el-empty>
                </template>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination v-model:current-page="filterParams.current" v-model:page-size="filterParams.size"
                :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="getAccountListData" @current-change="getAccountListData" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getAccountList } from "@/api/finance/platformAccounts";
import { useRouter } from "vue-router";
const router = useRouter();

const accountList = ref([]);
const filterParams = ref({
    size: 10,
    current: 1,
    platformCode: 'ZHONG_JIN',
})
const reset = () => {
    filterParams.value = {
        size: 10,
        current: 1,
        platformCode: 'ZHONG_JIN',
    }
    getAccountListData()
}
const total = ref(0)
const getAccountListData = async () => {
    try {
        const res = await getAccountList({ ...filterParams.value });
        accountList.value = res.data.list;
        total.value = res.data.total;
    } catch (error) {

    }
}
const toPayments = (row) => {
    router.push({
        path: 'budgetDetails',
        query: {
            memberId:row.memberId
        }
    })
}
onMounted(() => {
    getAccountListData();
})
</script>

<style lang="scss" scoped>
.pagination {
    display: flex;
    justify-content: end;
    margin-top: 20px;
}


</style>